home *** CD-ROM | disk | FTP | other *** search
/ PCGUIA 114 / PC Guia 114.iso / Software / Utils / The Gimp 2.2.1 / gimp-help-2-0.6-setup.exe / {app} / share / gimp / 2.0 / help / en / ch03s06s03.html < prev    next >
Encoding:
Extensible Markup Language  |  2004-12-19  |  16.2 KB  |  413 lines
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>6.3.┬áGradient Tool</title>
  7.     <link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
  8.     <link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
  9.     <meta name="generator" content="DocBook XSL Stylesheets V1.66.1" />
  10.     <link rel="start" href="index.html" title="GIMP User Manual" />
  11.     <link rel="up" href="ch03s06.html" title="6.┬áOther" />
  12.     <link rel="prev" href="ch03s06s02.html" title="6.2.┬áBucket Fill" />
  13.     <link rel="next" href="ch03s06s04.html" title="6.4.┬áColor Picker Tool" />
  14.   </head>
  15.   <body>
  16.     <div xmlns="" class="navheader">
  17.       <table width="100%" summary="Navigation header">
  18.         <tr>
  19.           <th colspan="3" align="center" id="chaptername">6.┬áOther</th>
  20.         </tr>
  21.         <tr>
  22.           <td width="20%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a>┬á</td>
  23.           <th width="60%" align="center" id="sectionname">6.3.┬áGradient Tool</th>
  24.           <td width="20%" align="right">┬á<a accesskey="n" href="ch03s06s04.html">Next</a></td>
  25.         </tr>
  26.       </table>
  27.       <hr />
  28.     </div>
  29.     <div class="sect2" lang="en" xml:lang="en">
  30.       <div class="titlepage">
  31.         <div>
  32.           <div>
  33.             <h3 class="title"><a id="gimp-tool-blend"></a>6.3.┬áGradient Tool</h3>
  34.           </div>
  35.         </div>
  36.       </div>
  37.       <a id="id3445486" class="indexterm"></a>
  38.       <div class="mediaobject">
  39.         <img src="../images/toolbox/toolbox-gradient.png" />
  40.       </div>
  41.       <p>
  42.     This tool fills the selected area with a gradient blend of the
  43.     foreground and background colors by default, but there are many
  44.     options. To make a blend, drag the
  45.     cursor in the direction you want the gradient to go, and release
  46.     the mouse button when you feel you have the right position and
  47.     size of your blend. The softness of the blend depends on how far
  48.     you drag the cursor. The shorter the drag distance, the sharper it
  49.     will be. 
  50.   </p>
  51.       <p>
  52.     There are an astonishing number of things you can do with this
  53.     tool, and the possibilities may seem a bit overwhelming at first.
  54.     The two most important options you have are the Gradient and the
  55.     Shape.  Clicking the Gradient button in the tool options brings up
  56.     a Gradient Select window, allowing you to choose from among a
  57.     variety of gradients supplied with Gimp; you can also construct
  58.     and save custom gradients. 
  59.   </p>
  60.       <p>
  61.     If the gradient appears in black-and-white, then it will actually
  62.     use the foreground and background colors instead (and you will see
  63.     it colored that way in the tool options area).  If it appears in
  64.     color, then it will be used as is.
  65.   </p>
  66.       <p>
  67.     For Shape, there are 11 options:  Linear, Bilinear, Radial,
  68.     Square, Conical (symmetric), Conical (asymmetric), Shapeburst
  69.     (angular), Shapeburst (spherical), Shapeburst (dimpled), Spiral
  70.     (clockwise), and Spiral (counterclockwise); these are described in
  71.     detail below.  The Shapeburst options are the most interesting:
  72.     they cause the gradient to follow the shape of the selection
  73.     boundary, no matter how twisty it is.  Unlike the other shapes,
  74.     Shapeburst gradients are not affected by the length or direction
  75.     of the line you draw:  for them as well as every other type of
  76.     gradient you are required to click inside the selection and move
  77.     the mouse, but a Shapeburst appears the same no matter where you
  78.     click or how you move.
  79.   </p>
  80.       <div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
  81.         <table border="0" summary="Tip">
  82.           <tr>
  83.             <td rowspan="2" align="center" valign="top" width="25">
  84.               <img alt="[Tip]" src="../images/tip.png" />
  85.             </td>
  86.             <th align="left">Tip</th>
  87.           </tr>
  88.           <tr>
  89.             <td colspan="2" align="left" valign="top">
  90.               <p>
  91.       Check out the Difference option in the Mode menu, where doing the
  92.       same thing (even with full opacity) will result in fantastic
  93.       swirling patterns, changing and adding every time you drag the
  94.       cursor.
  95.     </p>
  96.             </td>
  97.           </tr>
  98.         </table>
  99.       </div>
  100.       <div class="simplesect" lang="en" xml:lang="en">
  101.         <div class="titlepage">
  102.           <div>
  103.             <div>
  104.               <h4 class="title"><a id="id3445576"></a>Activate Tool</h4>
  105.             </div>
  106.           </div>
  107.         </div>
  108.         <div class="itemizedlist">
  109.           <ul type="disc">
  110.             <li>
  111.               <p>
  112.           The Blend Tool can be called in the following
  113.           order, from the image-menu:
  114.           <span class="guimenuitem"><span class="accel">T</span>ools</span>/
  115.       <span class="guimenuitem"><span class="accel">P</span>aint Tools</span>/
  116.           <span class="guimenuitem">Blen<span class="accel">d</span></span>. 
  117.         </p>
  118.             </li>
  119.             <li>
  120.               <p>
  121.           The Tool can also be called by clicking the tool icon:
  122.           <span class="guiicon">
  123.         <span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
  124.           </span>
  125.         </p>
  126.             </li>
  127.           </ul>
  128.         </div>
  129.       </div>
  130.       <div class="simplesect" lang="en" xml:lang="en">
  131.         <div class="titlepage">
  132.           <div>
  133.             <div>
  134.               <h4 class="title"><a id="id3445640"></a>Key modifiers (Defaults)</h4>
  135.             </div>
  136.           </div>
  137.         </div>
  138.         <div class="variablelist">
  139.           <dl>
  140.             <dt>
  141.               <span class="term">Shortcut</span>
  142.             </dt>
  143.             <dd>
  144.               <p>
  145.             The <span><b class="keycap">L</b></span>
  146.             key will change the active tool to Gradient Fill.
  147.           </p>
  148.             </dd>
  149.             <dt>
  150.               <span class="term">
  151.           <span><b class="keycap">Ctrl</b></span>
  152.         </span>
  153.             </dt>
  154.             <dd>
  155.               <p>
  156.             <span><b class="keycap">Ctrl</b></span> is used to create straight lines that are
  157.             constrained to 15 degree absolute angles.
  158.           </p>
  159.             </dd>
  160.           </dl>
  161.         </div>
  162.       </div>
  163.       <div class="simplesect" lang="en" xml:lang="en">
  164.         <div class="titlepage">
  165.           <div>
  166.             <div>
  167.               <h4 class="title"><a id="id3445697"></a>Options</h4>
  168.             </div>
  169.           </div>
  170.         </div>
  171.         <div class="variablelist">
  172.           <dl>
  173.             <dt>
  174.               <span class="term">Overview</span>
  175.             </dt>
  176.             <dd>
  177.               <p>
  178.           The available tool options can be accessed
  179.           by double clicking the Gradient Tool icon.
  180.           <span class="guiicon">
  181.         <span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
  182.           </span>
  183.         </p>
  184.             </dd>
  185.             <dt>
  186.               <span class="term">Opacity</span>
  187.             </dt>
  188.             <dd>
  189.               <p>
  190.           The Opacity slider sets the transparency level for the gradient. A
  191.           higher opacity setting results in a more opaque fill and a lower
  192.           setting results in a more transparent fill.
  193.         </p>
  194.             </dd>
  195.             <dt>
  196.               <span class="term">Mode</span>
  197.             </dt>
  198.             <dd>
  199.               <p>
  200.           The Mode dropdown list provides a selection of paint application
  201.           modes. A list of these modes can be found in the
  202.           <a href="go01.html#glossary-modes">Glossary</a>.  
  203.         </p>
  204.             </dd>
  205.             <dt>
  206.               <span class="term">Gradient</span>
  207.             </dt>
  208.             <dd>
  209.               <p>
  210.           A variety of gradient patterns can be selected from the
  211.           drop-down list.  The tool causes a shading pattern that
  212.           transitions from foreground to background color, in the
  213.           direction the user determines by drawing a line in the
  214.           image.  For the purposes of drawing the gradient, the
  215.           <span class="guilabel">Reverse</span> checkbox switches foreground
  216.           and background.
  217.         </p>
  218.             </dd>
  219.             <dt>
  220.               <span class="term">Offset</span>
  221.             </dt>
  222.             <dd>
  223.               <p>
  224.           The <span class="guilabel">Offset</span> Value is the "slope" of the
  225.           gradient.
  226.         </p>
  227.             </dd>
  228.             <dt>
  229.               <span class="term">Shape</span>
  230.             </dt>
  231.             <dd>
  232.               <p>
  233.           The <span class="acronym">Gimp</span> provides 11 shapes, which can be
  234.       selected from the drop-down list.  Details on each of the
  235.       shapes are given below.
  236.     </p>
  237.               <p>
  238.           </p>
  239.               <div class="variablelist">
  240.                 <dl>
  241.                   <dt>
  242.                     <span class="term">Linear</span>
  243.                   </dt>
  244.                   <dd>
  245.                     <p>
  246.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-linear.png" /></span>
  247.                 </p>
  248.                     <p>
  249.                   The <span class="guilabel">Linear</span>gradient begins with
  250.                   the foreground color at the starting point of the
  251.                   drawn line and transitions linearly to the background
  252.                   color at the ending point.
  253.                 </p>
  254.                   </dd>
  255.                   <dt>
  256.                     <span class="term">Bi-Linear</span>
  257.                   </dt>
  258.                   <dd>
  259.                     <p>
  260.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-bilinear.png" /></span>
  261.                 </p>
  262.                     <p>
  263.                   The <span class="guilabel">Bi-Linear</span> shape proceeds in
  264.                   both directions from the starting point, for a
  265.                   distance determined by the lenth of the drawn line.
  266.                   It is useful, for example, for giving the appearance
  267.                   of a cylinder.
  268.                 </p>
  269.                   </dd>
  270.                   <dt>
  271.                     <span class="term">Radial</span>
  272.                   </dt>
  273.                   <dd>
  274.                     <p>
  275.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-radial.png" /></span>
  276.                 </p>
  277.                     <p>
  278.                   The <span class="guilabel">Radial</span> gradient gives a circle,
  279.                   with foreground color at the center and background color
  280.                   outside the circle.  It gives the appearance of a sphere
  281.                   without directional lighting.
  282.                 </p>
  283.                   </dd>
  284.                   <dt>
  285.                     <span class="term">Square</span>
  286.                   </dt>
  287.                   <dd>
  288.                     <p>
  289.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-square.png" /></span>
  290.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-ang-shapeburst.png" /></span>
  291.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-spher-shapeburst.png" /></span>
  292.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-dim-shapeburst.png" /></span>
  293.                 </p>
  294.                     <p>
  295.                   There are four shapes that are some variant on a
  296.                   square: <span class="guilabel">Square</span>,
  297.                   <span class="guilabel">Shapeburst(angular)</span>,
  298.                   <span class="guilabel">Shapeburst(spherical)</span>, and
  299.                   <span class="guilabel">Shapeburst(dimpled)</span>.  They all
  300.                   put the foreground color at the center of a square,
  301.                   whose center is at the start of the drawn line, and
  302.                   whose half-diagonal is the length of the drawn line.
  303.                   The four options provide a variety in the manner in
  304.                   which the gradient is calculated; experimentation is
  305.                   the best means of seeing the differences.
  306.                 </p>
  307.                   </dd>
  308.                   <dt>
  309.                     <span class="term">Conical (symmetric)</span>
  310.                   </dt>
  311.                   <dd>
  312.                     <p>
  313.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-sym-conical.png" /></span>
  314.                 </p>
  315.                     <p>
  316.                   The <span class="guilabel">Conical(symmetrical)</span> shape
  317.                   gives the sensation of looking down at the tip of a
  318.                   cone, which appears to be illuminated with the
  319.                   background color from a direction determined by the
  320.                   direction of the drawn line.
  321.                 </p>
  322.                   </dd>
  323.                   <dt>
  324.                     <span class="term">Conical (asymmetric)</span>
  325.                   </dt>
  326.                   <dd>
  327.                     <p>
  328.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-asym-conical.png" /></span>
  329.                   </p>
  330.                     <p>
  331.                   <span class="guilabel">Conical(asymmetric)</span> is similar to
  332.                   <span class="guilabel">Conical(symmetric)</span> except that
  333.                   the "cone" appears to have a ridge where the line is
  334.                   drawn.
  335.                 </p>
  336.                   </dd>
  337.                   <dt>
  338.                     <span class="term">Spiral (clockwise)</span>
  339.                   </dt>
  340.                   <dd>
  341.                     <p>
  342.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-clock-spiral.png" /></span>
  343.                   <span class="inlinemediaobject"><img src="../images/tool-options/gradient-anticlock-spiral.png" /></span>
  344.                 </p>
  345.                     <p>
  346.                   The <span class="guilabel">Spiral</span> tools provide spirals
  347.                   whose repeat width is determined by the length of
  348.                   the drawn line.
  349.                 </p>
  350.                   </dd>
  351.                 </dl>
  352.               </div>
  353.               <p>
  354.         </p>
  355.             </dd>
  356.             <dt>
  357.               <span class="term">Repeat</span>
  358.             </dt>
  359.             <dd>
  360.               <p> 
  361.           There are two repeat modes: <span class="guilabel">Sawtooth Wave</span>
  362.           and <span class="guilabel">Triangular Wave</span>.  The Sawtooth
  363.           pattern is achieved by beginning with the foreground,
  364.           transitioning to the background, then starting over with the
  365.           foreground.  The Triangular starts with the foreground,
  366.           transitions to the background, then transitions back to the
  367.           foreground.
  368.         </p>
  369.             </dd>
  370.             <dt>
  371.               <span class="term">Dithering</span>
  372.             </dt>
  373.             <dd>
  374.               <p>
  375.           Dithering is fully explained in the <a href="go01.html#glossary-dithering">Glossary</a>
  376.         </p>
  377.             </dd>
  378.             <dt>
  379.               <span class="term">Adaptive Supersampling</span>
  380.             </dt>
  381.             <dd>
  382.               <p>
  383.           <span class="guilabel">Adaptive Supersampling</span> is a more
  384.           sophisticated means of smoothing the "jagged" effect of a
  385.           sharp transiton of color along a slanted or curved line.
  386.         </p>
  387.             </dd>
  388.           </dl>
  389.         </div>
  390.       </div>
  391.     </div>
  392.     <div class="navfooter">
  393.       <hr />
  394.       <table width="100%" summary="Navigation footer">
  395.         <tr>
  396.           <td width="40%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a>┬á</td>
  397.           <td width="20%" align="center">
  398.             <a accesskey="u" href="ch03s06.html">Up</a>
  399.           </td>
  400.           <td width="40%" align="right">┬á<a accesskey="n" href="ch03s06s04.html">Next</a></td>
  401.         </tr>
  402.         <tr>
  403.           <td width="40%" align="left" valign="top">6.2.┬áBucket Fill┬á</td>
  404.           <td width="20%" align="center">
  405.             <a accesskey="h" href="index.html">Home</a>
  406.           </td>
  407.           <td width="40%" align="right" valign="top">┬á6.4.┬áColor Picker Tool</td>
  408.         </tr>
  409.       </table>
  410.     </div>
  411.   </body>
  412. </html>
  413.